<template>
	<div class="main">
		<div class="user-info">
			<div class="user-info-top">
				<router-link :to="{path:'studentcenter'}" class="user-info-top-left">
					<div class="user-info-top-left-image">
						<img src="@/assets/images/wechat/student/studentinfo/leftrow.png" />
					</div>
				</router-link>
				<div class="user-info-top-mid">
					我的资料
				</div>
				<div @click="ajaxUpdateStudent" class="user-info-top-right">
					<p>保存</p>
				</div>
			</div>
			<div class="user-info-content">
				<ul>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">学校</div>
							<div class="user-info-content-detail-right">{{studentData.schoolName}}</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">学号</div>
							<div class="user-info-content-detail-right">{{studentData.acctno}}</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">姓名</div>
							<div class="user-info-content-detail-right">{{studentData.name}}</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">余额</div>
							<div class="user-info-content-detail-right">{{studentData.balance/100}}</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">手机号</div>
							<div class="user-info-content-detail-right">

								<input type="text" maxlength="11" placeholder="请输入手机号" v-model="studentData.mobilePhone" />

							</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">邮箱</div>
							<div class="user-info-content-detail-right">

								<input type="text" maxlength="30" placeholder="请输入邮箱" v-model="studentData.email" />

							</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">地址</div>
							<div class="user-info-content-detail-right">

								<input type="text" maxlength="50" placeholder="请输入地址" v-model="studentData.address" />

							</div>
						</div>
					</li>
					<li>
						<div class="user-info-content-detail">
							<div class="user-info-content-detail-left">所属学院</div>
							<div class="user-info-content-detail-right">

								<select v-model="studentData.collegeId">
									<option value="0">请选择</option>
									<option v-for="(item,index) in leaderList" :key="index" :value="item.id">{{item.name}}</option>
								</select>

							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</div>
</template>

<script>
	//引入js	
	import router from '@/router/index'
	import {
		studentFindStudentById,
		studentUpdateStudentById
	} from '@/api/student'
	import { studentSelectLeader } from '@/api/leader'

	export default {
		components: {
		},
		data() {
			return {
				ajaxFlag: true, //监控ajax请求，避免多次请求

				studentData: {},
				leaderList: []
			}
		},
		created:async function() {
			var ajaxData = {}
			var resultData = await studentFindStudentById(ajaxData)
			if(resultData.code==200){
				this.studentData=resultData.data
			}
			ajaxData = {}
			ajaxData.pageNo = 1
			ajaxData.pageSize = 20
			ajaxData.level = 3
			resultData = await studentSelectLeader(ajaxData)
			if(resultData.code==200){
				this.leaderList=resultData.data.leaderFindResVoList
			}
		},
		beforeMount: function() {

		},
		mounted: function() {

		},
		methods: {
			ajaxUpdateStudent:async function() {
				if (!this.ajaxFlag) {
					alert("请求过于频繁");
					return 0;
				}
				if (!this.studentData.mobilePhone || this.studentData.mobilePhone.length != 11) {
					alert("请填写标准的手机号");
					return 0;
				}
				if(!this.studentData.email){
					alert("请填写邮箱");
					return 0;
				}
				if(!this.studentData.address){
					alert("请填写居住地址");
					return 0;
				}
				this.ajaxFlag = false;
				var ajaxData = {}
				ajaxData.mobilePhone = this.studentData.mobilePhone
				ajaxData.email=this.studentData.email
				ajaxData.address=this.studentData.address
				ajaxData.collegeId=this.studentData.collegeId
				var resultData = await studentUpdateStudentById(ajaxData)
				if(resultData.code==200){
					alert("修改成功")
				}else{
					alert("修改失败")
				}
				this.ajaxFlag = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		background-color:#F5F5F5;
		height: 700px;
	}

	.user-info {
		width: 100%;
		height: 200px;
		position: relative;
		background-color: black;
	}

	.user-info-content {
		width: 90%;
		overflow: hidden;
		position: absolute;
		border-radius: 10px;
		top: 100px;
		left: 0px;
		right: 0px;
		margin: auto;
		background-color: white;
	}

	.user-info-top {
		width: 100%;
		display: flex;
		overflow: hidden;
	}

	.user-info-top-left {
		width: 40px;
		height: 40px;
		border-radius: 50px;
		margin-top: 30px;
		margin-left: 30px;
		background-color: white;
	}

	.user-info-top-left-image {
		width: 20px;
		height: 20px;
		overflow: hidden;
		margin: auto;
		margin-top: 10px;
		margin-left: 10px;
		position: absolute;

	}

	.user-info-top-left-image>img {
		width: 100%;
		height: 100%;
	}

	.user-info-top-mid {
		flex: 1;
		line-height: 40px;
		margin-top: 30px;
		color: white;
		font-weight: bold;
		font-size: 18px;
		font-style: italic;
		text-align: center;
		letter-spacing: 5px;
	}

	.user-info-top-right {
		width: 80px;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
		text-align: center;
		letter-spacing: 5px;
		margin-top: 35px;
		margin-left: 26px;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		background-color: white;
	}

	.user-info-top-right>p {
		margin-left: 10px;
	}

	.user-info-content>ul {
		width: 100%;
		height: 100%;
	}

	.user-info-content>ul>li {
		width: 100%;
		height: 55px;
		overflow: hidden;
		border-bottom: 1px solid lightgray;
	}

	.user-info-content>ul>li:nth-last-child(1) {
		border-bottom: 1px solid #FFFFFF !important;
	}

	.user-info-content-detail {
		width: 96%;
		display: flex;
		margin: auto;
		margin-top: 12px;

	}

	.user-info-content-detail-left {
		width: 80px;
		line-height: 30px;
		text-align: right;
		color: grey;

	}

	.user-info-content-detail-right {
		flex: 1;
		line-height: 30px;
		margin-left: 10px;
	}

	.user-info-content-detail-right>input[type='text'] {
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
		font-size: 16px;
	}

	.user-info-content-detail-right>select {
		background: transparent;
		border: none;
		width: 100%;
		height: 100%;
		font-size: 16px;
		color: black;
		outline: none;
	}
</style>
